<template>
    <div>
      <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
      </commpVxeTable>
    </div>
  </template>
  <script>
  import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
  import YchConstant from "@/api/YchConstant";
  export default {
    components: {
      commpVxeTable
    },
    props:{
    },
    data() {
      return {
        reCommpVxeTable: '',
        dataTableConfig: {
          api: YchConstant.SPZX_OA + '/nk-bxsqlc/bxsqStatPageList',
          rowId: 'id',
          urlType: true,
          paramet:{}
        },
        formItem: [
          {
            label: '类型',
            model: 'fbxlx',
          },{
            label: '申请开始时间',
            model: 'startTime',
            type: 'datePicker',
            format: 'YYYY-MM-DD'
          },{
            label: '申请结束时间',
            model: 'endTime',
            type: 'datePicker',
            format: 'YYYY-MM-DD'
          },{
            label: '提交人',
            model: 'ftjr',
          },{
            label: '申请人姓名',
            model: 'fsqrxm',
          },{
            label: '一级分类',
            model: 'fxmdl',
          },{
            label: '二级分类',
            model: 'fxmxl',
          },
        ],
        columnsVxe: [
          {
            type: 'checkbox',
            width: 60,
            fixed: 'left'
          },{
            title: '摘要',
            field: 'fzy',
          },{
            title: '申请日期',
            field: 'fsqrq',
          },{
            title: '类型',
            field: 'fbxlx',
          },{
            title: '支出开始日期',
            field: 'fksrq',
          },{
            title: '支出结束日期',
            field: 'fjsrq',
          },{
            title: '提交人',
            field: 'ftjr',
          },{
            title: '一级分类',
            field: 'fxmdl',
          },{
            title: '二级分类',
            field: 'fxmxl',
          },{
            title: '天数',
            field: 'fts',
          },{
            title: '金额',
            field: 'fje',
          },{
            title: '申请人',
            field: 'fsqrxm',
          },
        ],
        idList: [],
        passObj: {},
      }
    },
    methods: {
      // 勾选
      checkboxChange(val){
        //console.log('已选择',val)
        this.idList = []
        if(val.length){
          val.forEach(item => {
              this.idList.push(item.id)
          });
        }
      },
      // 搜索
      searchEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
        //console.log(this.dataTableConfig.paramet)
      },
      // 重置
      resetEvent(){
        this.dataTableConfig.paramet = {
            ...this.dataTableConfig.paramet,
        }
      },
    },
  }
  </script>
  <style lang="less">
  .red-btn{
      color:  white !important;
      border: 1px solid #ed5565 !important;
      background-color: #ed5565 !important;
  }
  </style>
